<template>
  <base-breadcrumb>
    <a-row
      :gutter="24"
      class="page-height"
    >
      <!-- 左侧列表 -->
      <a-col :span="5">
        <a-card
          v-loading="loading"
          class="page-height-tree"
        >
          <title-name title="部门/事项"></title-name>
          <div class="option-btns">
            <a-button
              type="primary"
              @click="addClass"
              v-if="hideBuquBtn()"
            > 新增</a-button>
            <a-button
              type="primary"
              :disabled="!selectRow.id"
              @click="editClass"
              v-if="hideBuquBtn()"
            >编辑</a-button>
            <a-button
              type="danger"
              :disabled="!selectRow.id"
              @click="delClass()"
              v-if="hideBuquBtn()"
            >删除</a-button>
            <!--            <a-button class="mb12 ml12" type="primary" @click="getClassList()">刷新</a-button>-->
          </div>
          <div class="l-wrapper">
            <div
              v-for="(item, index) in classList"
              :key="index"
              class="left-TypeList"
              :class="{ active: selectRow.id === item.id , disabled:item.status === 1}"
              @click="rowClick(item)"
            >
              {{ item.name }}
            </div>
          </div>
        </a-card>
      </a-col>
      <!-- 右侧表格 -->
      <a-col
        :span="19"
        class="page-height-list-wrapper"
      >
        <a-card class="page-height-list">
          <!-- <title-name title="风险指标"></title-name> -->
          <a-button
            class="mb12"
            type="primary"
            @click="add"
            v-if="hideBuquBtn()"
          >新增</a-button>
          <!--          <a-button class="mb12 ml12" type="primary" @click="$refs.table.refresh()">刷新</a-button>-->
          <list-table
            ref="table"
            :scroll="{x:1076}"
            :columns="columns"
            :request="loadData"
            :isScrollX="false"
            :page-keys="['pageNo','pageSize','totalSize']"
            :show-page="false"
          >
            <div
              slot="actions"
              slot-scope="text, record"
              class="pub-table-list-action"
            >
              <span @click="edit(record)" v-if="hideBuquBtn()">编辑</span>
              <span
                v-if="record.statusStr === '不可用'&&hideBuquBtn()"
                @click="del(record)"
                
              >删除</span>
            </div>
          </list-table>
        </a-card>
      </a-col>
    </a-row>
    <add
      :visible.sync="visible"
      :form="form"
      @ok="$refs.table.refresh()"
    />
    <add-class-post
      :visible.sync="visible1"
      :form="selectRow"
      @ok="getClassList()"
    />
  </base-breadcrumb>
</template>

<script>
import add from './add'
import addClassPost from './addClassPost'
import api from '@/api/safetySupervision/base/constructionStage.js'

export default {
  name: 'a' + Date.now(),
  data() {
    return {
      visible: false,
      visible1: false,
      loading: false,

      classList: [],
      selectRow: { id: '' },
      form: {},
      columns: [
        {
          title: '风险指标',
          dataIndex: 'name',
          width: 200
        },
        {
          title: '状态',
          dataIndex: 'statusStr',
          width: 70
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: 120,
          scopedSlots: { customRender: 'actions' }
        }
      ],
      loadData: (q) => {
        if (this.selectRow.id) return api.findListByDetails({}, { ...q, type: 1, cataId: this.selectRow.id })
        return { code: 200, data: [] }
      }
    }
  },
  components: {
    add,
    addClassPost
  },
  created() {
    this.getClassList()
  },
  mounted() {},
  methods: {
    async getClassList() {
      this.loading = true
      let res = await api.list({}, { type: 1, haveTree: false })
      this.loading = false
      if (res.code === this.SUCCESS_CODE) {
        this.classList = res.data
        this.selectRow = this.classList[0] || { id: '' }
        this.$refs.table.refresh()
      }
    },
    // 点击左边列表
    rowClick(item) {
      this.selectRow = item
      this.$refs.table.refresh()
    },
    addClass() {
      this.visible1 = true
      this.selectRow = { id: '', status: 0 }
      this.category = '新增'
    },
    editClass() {
      this.visible1 = true
      this.category = '编辑'
    },
    delClass() {
      this.$delList2(api.del, this.getClassList, { ids: [this.selectRow.id] }, null)
    },

    del(record) {
      this.$delList2(
        api.delDetail,
        (res) => {
          this.$refs.table.refresh()
        },
        { ids: [record.id] },
        null
      )
    },
    add() {
      if (this.selectRow.id) {
        this.form = { status: 0, parent: this.selectRow, cataId: this.selectRow.id, parentName: this.selectRow.name }
        this.visible = true
      } else {
        this.$noticeWarning('请选择部门/事项')
      }
    },
    edit(record) {
      if (this.selectRow.id) {
        this.form = { ...record, parent: this.selectRow, cataId: this.selectRow.id, parentName: this.selectRow.name }
        this.visible = true
      } else {
        this.$noticeWarning('请选择部门/事项')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.option-btns {
  button {
    margin-right: 0.5rem;
  }
}

.l-wrapper {
  overflow: auto;
  height: calc(var(--heightVh) - 15rem);
}

.left-TypeList {
  margin: 10px 0;
  background: white;
  padding: 10px;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  border-radius: 5px;

  &.active {
    background: #0e7ed0 !important;
    color: white;
  }

  &.disabled {
    //cursor: not-allowed;
    background: gray;
    color: white;
  }
}
</style>
